<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="">
    <script src="/static/relation_research_fit_you/js/rem.js"></script>
    <link rel="stylesheet" href="/static/relation_research_fit_you/css/style.css?v=28">
    <link rel="stylesheet" href="/static/relation_research_fit_you/css/swiper.min.css">
    <title>适合你的Ta</title>
</head>
<body>
<div class="relation_research_fit_you">
    <!--导航栏-->
    <div class="nav_con" style="visibility:{$is_show_nav?'visible':'hidden'}">
        <div class="nav-box">
            <div class="bg-color" style="height: {$height/50 + 0.88}rem"></div>
            <div class="back_con" onclick="commonJsToNative('local', 'back');">
                <img class="img_nav_back" src="/static/relation_research_fit_you/images/nav/back.png" alt="">
            </div>
            <div class="title-name">适合你的Ta</div>
            <div class="nav_right_con" onclick="commonJsToNative('local', '{$nav_right_click_link}');">
                <img class="img_nav_right" src="/static/relation_research_fit_you/images/nav/recode_change.png" alt="">
            </div>
        </div>
    </div>
    {if $error_msg == ""}
    <!--中间部分-->
    <div class="middle_con">
        <!--顶部部分（心背景图片、档案信息、导语）-->
        <div class="header_con">
            <!--顶部心图片-->
            <img class="bg_heart" src="/static/relation_research_fit_you/images/intro/header_heart_bg.png" alt="">

            <!--档案信息-->
            <div class="recode_con">
                <img class="img_avatar" src="{$recode.avatar}" alt="">
                <div class='name'>{$recode.name}</div>
                <div class='asc'>{$recode.asc}</div>
            </div>

            <!--导语部分-->
            <div class="intro_con">
                <img class="img_title" src="/static/relation_research_fit_you/images/intro/header_title.png" alt="">
                <div class="content_con">
                    <img class="img_left" src="/static/relation_research_fit_you/images/intro/header_content.png" alt="">
                    <div class="text_des">{$intro_text}</div>
                </div>
            </div>
        </div>
        <!--顶部连接部分-->
        <div class='header_middle_connect_con'>
            <div class="imgs_con">
                <img class="img_connect" src="/static/relation_research_fit_you/images/img_connect.png" alt="">
                <img class="img_connect" src="/static/relation_research_fit_you/images/img_connect.png" alt="">
            </div>
            <div class="line_con"/>
        </div>
        <!--tab栏-->
        <div class="tab_con scrollTitle" data-index="scroll_swiper">
            {foreach $data_tabs as $k=>$vo}
            <div class='tab_item_con'>
                <div class="tab_text" id="tab_{$k}" onclick="onClickTab({$k})">{$vo.name}</div>
                <div id="tab_{$k}_line"></div>
            </div>
            {/foreach}
        </div>
        <!--滑动部分-->
        <div class="swiper_con">
            <div class="swiper-container" id="swiper">
                <div class="swiper-wrapper">
                    {foreach $data_tabs as $k=>$vo}
                    <div class="swiper-slide slidepage">
                        <div class="page_con">
                            <!--档案修改部分（已解锁)-->
                            {if $vo.status == 3}
                            <div class="recode_change_con">
                                <div class="unlock-recode-box {$vo.unlock_data.recode.is_expand?'expand':''} {$vo.unlock_data.recode.is_expand?'change':''}"
                                     data-expand="{$vo.unlock_data.recode.is_expand?1:0}">
                                    <div class="unlock-recode-title">
                                        <span class="title">购买时的档案信息</span>
                                        <div class="is-expand-box"><span></span></div>
                                    </div>
                                    <div class="recode-info-box">
                                        <div class="recode-name-box">
                                            <img src="{$vo.unlock_data.recode.info.avatar}" alt="">
                                            <span class="recode-name">{$vo.unlock_data.recode.info.name}</span>
                                        </div>
                                        {foreach name="$vo.unlock_data.recode.info.info_list" item="listItem"}
                                        <div class="recode-info-item">
                                            <span class="info-title">{$listItem.title}</span>
                                            <span class="info-value">{$listItem.content}</span>
                                        </div>
                                        {/foreach}
                                    </div>
                                    {if $vo.unlock_data.recode.is_show == 1 }
                                    <div class="recode-change-box">
                                        <img src="/static/relation_research_fit_you/images/recode_change/gaojing.png" alt=""
                                             class="tip-icon">
                                        <img src="/static/relation_research_fit_you/images/recode_change/close-icon.png" alt=""
                                             class="close-icon">
                                        <div class="change-title">检测到当前档案出生时间已发生修改</div>
                                        <div class="change-desc">已购买的运势内容不会随着档案的修改重新计算</div>
                                        <div class="change-btn" onclick="onClickUnLock('{$vo.not_unlock_data.link}','{$k}')">再次开通</div>
                                    </div>
                                    {/if}
                                </div>
                            </div>
                            {/if}

                            <!--未解锁目录部分/已解锁词条部分-->
                            <div class="content_con">
                                <!--tab内容顶部的图片-->
                                <img class="img_title" src="/static/relation_research_fit_you/images/tabs/{$k}_title.png" alt="">
                                <!--已解锁部分-->
                                {if $vo.status == 3 }
                                <div class='unlock_con'>
                                    {foreach $vo.unlock_data.list as $k_text_item=>$v_text_item}
                                    <!--已解锁词条单条内容部分-->
                                    <div class="unlock_item_con scrollTitle" data-index="m-{$k}-{$k_text_item}">
                                        <!--已解锁词条-顶部标题图片-->
                                        <img class="unlock_item_img"
                                             src="/static/relation_research_fit_you/images/tabs/{$v_text_item.img_title}" alt="">
                                        {foreach $v_text_item.text_list as $v_text}
                                        <!--已解锁词条-词条文案-->
                                        <pre class="text">{$v_text}</pre>
                                        {/foreach}
                                    </div>
                                    {/foreach}
                                    <!--已解锁-底部图片部分-->
                                    <img class="img_footer" src="/static/relation_research_fit_you/images/tabs/unlock_content_footer.png"
                                         alt="">
                                </div>
                                {/if}
                                <!--未解锁部分-->
                                {if $vo.status != 3 }
                                <div class='not_unlock_con'>
                                    <!--目录部分-->
                                    <img class="img_catalog"
                                         src="/static/relation_research_fit_you/images/tabs/not_unlock_header_catalog.png"
                                         alt=""/>
                                    {foreach $vo.not_unlock_data.catalog_list as $v_catalog}
                                    <!--单个目录-->
                                    <div class="catalog_item_con">
                                        <img class="img_catalog" src="/static/relation_research_fit_you/images/tabs/catalog_hint.png"
                                             alt=""/>
                                        <div class="catalog_title">{$v_catalog}</div>
                                        <img class="img_catalog" src="/static/relation_research_fit_you/images/tabs/catalog_hint.png"
                                             alt=""/>
                                    </div>
                                    {/foreach}

                                    <!--原价+现价+解锁文案/现价+解锁文案/计算中-->
                                    <div class='unlock_hint_con'
                                         onclick="onClickUnLock('{$vo.not_unlock_data.link}','{$k}')">
                                        <!--原价-->
                                        {if $vo.status == 1 }
                                        <div class="text_gray">{$vo.not_unlock_data.price_orignal}</div>
                                        {/if}
                                        <!--现价-->
                                        {if $vo.status == 0 || $vo.status == 1}
                                        <div class="text_normal">{$vo.not_unlock_data.price_now}{$price_unit}/解锁{$vo.name}</div>
                                        {/if}
                                        {if $vo.status == 2}
                                        <!--计算中-->
                                        <div class="text_normal">正在计算中请稍候…</div>
                                        {/if}
                                    </div>
                                </div>
                                {/if}

                            </div>

                        </div>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
    </div>
    <!--底部解锁部分-->
    {if $data_unlock_all.is_show == 1}
    <!--底部存在已解锁的时候，增加占位-->
    <div class="bottom_sep_con"></div>
    <div class="bottom_active_and_unlock_con">
        {if $data_unlock_all.time > 0}
        <!--活动标示部分-->
        <div class="active_con">
            <img class="img_active" src="" alt="">
            <div class="time_con">
                <div class="text_num" id="day"></div>
                <div class="text_dot" id="dot_1"></div>
                <div class="text_num" id="hour"></div>
                <div class="text_dot" id="dot_2"></div>
                <div class="text_num" id="min"></div>
                <div class="text_dot" id="dot_3"></div>
                <div class="text_num" id="sec"></div>
            </div>
        </div>
        {/if}
        <!--解锁价格和按钮部分-->
        <div class="unlock_con">
            <div class="left_con">
                {if $data_unlock_all.time > 0}
                <!--活动的原价格-->
                <div class="price_orginal">{$data_unlock_all.price_orginal}</div>
                {/if}
                <div class="price">{$data_unlock_all.price}</div>
                {if $price_unit === "准币"}
                <div class="price_unit">{$price_unit}</div>
                {/if}
            </div>
            <div class="btn" onclick="onClickAll('{$data_unlock_all.link}');">解锁全部</div>
        </div>
    </div>
    {/if}

    <!--抽屉-->
    <div class="menu-box">
        <!--悬浮的目录按钮-->
        <div class="menu-button">
            <img src="/static/relation_research_fit_you/images/catalog/menu-button.png" alt="目录"/>
        </div>
        <!--底部灰色背景（目录展示的时候）-->
        <div class="menu-shadow" id="menu-shadow"></div>
        <!--目录列表-->
        <div class="menu-list">
            <div class="menu-title">
                <span class="head">目录</span>
                <i class="collapse"></i>
            </div>

            {foreach $data_catalog_list as $i=>$vo}
            <dl>
                <dt data-index="m-{$i}">{$vo.title}</dt>
                <dd>
                    <ul>
                        {foreach $vo.list as $j=>$jo}
                        <li class="sub_catalog_item_con" data-index="m-{$i}-{$j}">
                            <!--左侧远点-->
                            <i class="circle"></i>
                            <!--右侧文字内容-->
                            <div class="text_sub">{$jo}</div>
                        </li>
                        {/foreach}
                    </ul>
                </dd>
            </dl>
            {/foreach}
        </div>
    </div>
    {else}
    <div class="error_con">
        <img class="img_err" src="/static/relation_research_fit_you/images/error.png" alt="">
        <div class="text_err">{$error_msg}</div>
    </div>
    {/if}
</div>
{include file="../apps/web/view/public/sensors.html" /}
<script type="text/javascript">
    window.error_msg = '{$error_msg}';//是否展示日志

    window.is_show_log = '{$is_show_log}';//是否展示日志
    window.navHeight = {$height};
    window.appType = '{$appType}';
    window.isShow = 1; // 1抽屉隐藏 2抽屉显示
    window.time = '{$error_msg?0:$data_unlock_all.time}';//解锁全部时间
    window.tab_index = '{$error_msg?0:$tab_index}';//当前选中的第几个tab
    window.sensor_data = JSON.parse('{:json_encode($sensor_data)}');//打点数据

    window.onbeforeunload = function (e) {
        try {
            //页面停留时长，改为自己实现
            //打点
            sensors.track('SuitableLoverView', {
                refer_name: window.sensor_data.refer_name,
                refer_link: 'APP内跳转',
                unlock_list: window.sensor_data.unlock_list,
                $event_duration: ((new Date).getTime() - event_duration_start) / 1000,
            });
        } catch (e1) {
            console.error('sensors track SuitableLoverView e1=', e1);
        }
    };
</script>
<script type="text/javascript" src="/static/relation_research_fit_you/js/jquery-v2.1.1.min.js?v=27"></script>
<script type="text/javascript" src="/static/relation_research_fit_you/js/common.js?v=27"></script>
<script type="text/javascript" src="/static/relation_research_fit_you/js/swiper.min.js?v=27"></script>
<script type="text/javascript">
    if ('{$error_msg}' !== "") {//当没有异常信息的时候，才进行初始化
        console.error('{$error_msg}');
    } else {
        init();//初始化
    }
</script>
</body>
</html>
